<template>
  <el-dialog
    title="VIP说明标准格式"
    :close-on-click-modal="false"
    :visible.sync="isVisible"
    width="27%"
    @close="closeDialog"
    center
  >
    <p style="width: 300px">注：此VIP表仅供参考，具体以游戏内为主</p>
    <p><span>VIP等级</span><span>充值金额</span></p>
    <p><span>5</span><span>10</span></p>
    <p><span>6</span><span>50</span></p>
    <p><span>7</span><span>100</span></p>
    <p><span>8</span><span>200</span></p>
    <p><span>9</span><span>500</span></p>
    <p><span>10</span><span>1000</span></p>
    <p><span>11</span><span>2000</span></p>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="onCopy">复制</el-button>
    </span>
  </el-dialog>
</template>
<script>
export default {
  data() {
    return {
      isVisible: this.isShow,
    };
  },
  props: {
    isShow: Boolean,
  },
  methods: {
    closeDialog() {
      this.$emit("closeDialog");
    },
    onCopy() {
      var str =
        "     注：此VIP表仅供参考，具体以游戏内为主n     VIP等级  充值金额ns5s10ns6s50ns7 s100ns8 s200ns9 s500ns10s1000ns11s2000";
      str = str.replace(/n/g, "\n");
      str = str.replace(/s/g, "\t");
      this.$copyText(str).then(
        (e) => {
          this.$message({
            message: "复制成功",
            type: "success",
          });
        },
        function (e) {}
      );
      this.isVisible = false;
    },
  },
};
</script>
<style lang="scss" scoped>
.el-dialog__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.el-dialog__body p {
  line-height: 30px;
  display: flex;
  justify-content: space-around;
  width: 200px;
}
</style>